<template>
  <transition name="animation" appear>
    <div class="shopCart-container">
      <div class="shopCart-header" :style="headerStyle">
        <i class="iconfont icondayuhao icon" @click="backPrev"></i>
        购物车
        <i class="iconfont iconsearch icon"></i>
      </div>
      <div class="shopCart-content">
        <scroll class="content-scroll">
          <div>
            <div class="no-login">
              <div class="left">登录后享受更多优惠</div>
              <div class="right">
                <span>去登录</span>
                <i class="iconfont icondayuhao icon"></i>
              </div>
            </div>
            <div class="no-item">
              <router-link tag="div" to="../home" class="content-wrap">
                <!-- <i class="icon iconfont">&#xe600;</i> -->
                <span>购物车还是空的</span>
                <em>去逛逛</em>
              </router-link>
            </div>
            <cells-auto-fill :views="data.header"></cells-auto-fill>
            <div class="recommend-content">
              <div class="goods-item" v-for="(item, index) of data.recom_list">
                <a>
                  <div class="goods-img-box">
                    <img v-lazy="addHttps(item.image_url)" />
                  </div>
                  <div class="goods-info">
                    <div class="goods-name">{{ item.name }}</div>
                    <div class="goods-price">{{ item.price }}</div>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </scroll>
      </div>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
import { headerStyleMixin, homeMixin } from 'assets/js/mixin'
import Scroll from 'common/scroll/scroll'
import data from 'assets/json/shop-cart'
import CellsAutoFill from 'common/cells-auto-fill/cells-auto-fill'

export default {
  mixins: [headerStyleMixin, homeMixin],
  data() {
    return {
      data: data.data
    }
  },
  methods: {
    backPrev() {
      this.$router.back()
    }
  },
  components: {
    Scroll,
    CellsAutoFill
  }
}
</script>

<style lang="stylus" scoped ref="stylesheet/stylus">
@import '~assets/stylus/mixin';

.animation-enter-active, .animation-leave-active {
  transition: 0.3s;

  .shopCart-header {
    transition: all 0.3s ease;
  }

  .shopCart-content {
    transition: none;
  }
}

.animation-enter, .animation-leave-to {
  .shopCart-header {
    transform: translate3d(0, -100%, 0);
  }
}

.animation-leave-to {
  .shopCart-content {
    opacity: 0;
    height: 0;
    display: none !important;
    color: #fff;
    transform: translate3d(-100%, -100%, 0);
  }
}

.shopCart-container {
  .shopCart-header {
    z-index: 101;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    color: rgb(102, 102, 102);
    font-size: 0.3rem;
    no-wrap();
    background-color: rgb(242, 242, 242);

    &>.icondayuhao {
      transform: rotate(180deg);
    }

    .icon {
      margin: 0 0.2rem;
      display: inline-block;
      text-align: center;
      font-size: 0.4rem;
      width: 0.6rem;
      height: 50px;
      line-height: 50px;
    }
  }

  .shopCart-content {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 52px;
    display: flex;

    .content-scroll {
      width: 100%;
      height: 100%;
      overflow: hidden;

      .no-login {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.32rem;
        box-sizing: border-box;
        height: 1.04rem;
        color: rgba(0, 0, 0, 0.54);

        .left {
          font-size: 0.32rem;
          color: rgba(0, 0, 0, 0.87);
          display: block;
          text-align: left;
        }

        .right {
          display: flex;
          justify-content: space-between;
          align-items: center;

          span {
            font-style: normal;
            font-size: 0.24rem;
            text-align: right;
          }

          .icondayuhao {
            font-weight: 600;
            font-size: 0.32rem;
          }
        }
      }

      .no-item {
        background: #ebebeb;
        padding: 0.2rem;

        .content-wrap {
          display: flex;
          justify-content: center;
          align-items: center;

          span {
            padding: 0 0.16rem 0 0.96rem;
            line-height: 0.8rem;
            font-size: 0.24rem;
            background: url('https://m.mi.com/static/img/cartnull.daaf7926f8.png') no-repeat 0;
            background-size: auto 100%;
            color: rgba(0, 0, 0, 0.27);
          }

          em {
            padding: 0 0.24rem;
            height: 0.5rem;
            line-height: 0.5rem;
            font-size: 0.24rem;
            border: 1px solid rgba(0, 0, 0, 0.15);
            box-sizing: border-box;
            color: rgba(0, 0, 0, 0.87);
            font-style: normal;
          }
        }
      }
    }
  }

  .recommend-content {
    margin-top: 0.05rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .goods-item {
      flex: 0 0 49.5%;
      width: 49.5%;

      a {
        display: block;

        .goods-img-box {
          img {
            width: 100%;
            min-height: 3.56rem;
          }
        }

        .goods-info {
          padding: 0.18rem 0.26rem 0.22rem;
          box-sizing: border-box;

          .goods-name {
            font-size: 0.28rem;
            no-wrap();
          }

          .goods-price {
            position: relative;
            margin-top: 0.1rem;
            padding-left: 0.5em;
            font-size: 0.32rem;
            line-height: 1em;
            display: inline-block;
            color: #ff6700;

            &:before {
              content: '\A5';
              position: absolute;
              left: 0;
              top: 0;
              font-size: 0.76em;
              text-decoration: none;
            }
          }
        }
      }
    }
  }
}
</style>